<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;}

        #tex{
            display: block;
            margin-top: 50px;
            width: 250px;
            height: 150px;
        }
    </style>
</head>
<body>
    <h1>基础的get请求</h1>
    <form id="form" action="" method="">
      <input id="ipt" type="text">
      <button id="btn">输入学生id 查询他的详细信息</button>
      <textarea id="tex" ></textarea>
    </form>

    <script>
      const oIpt = document.querySelector('#ipt')
      const oUl = document.querySelector('.list')
      const oForm = document.querySelector('#form')
      const oTex = document.querySelector('#tex')


      oForm.onsubmit = function(){
        // 获取用户输入的id
        const userID = oIpt.value
        //创建XMLHttpRequest实例
        const xhr = new XMLHttpRequest();
        //打开路径
        xhr.open('GET',`/user/${userID}?_=${Date.now()}`)
        //发送请求
        xhr.send();
        //绑定事件
        xhr.onreadystatechange = function(){
            // 判断状态码和响应码的状态
            if(xhr.readyState === 4 && xhr.status>=200 && xhr.status<=299){
                oTex.innerHTML = xhr.responseText
            }
        }

        //结束from表单的自动请求
        return false
      }
    </script>

</body>
</html>